<template>
	<u-navbar auto-back :bgColor="`rgba(255,255,255,0)`"></u-navbar>
	<view class="perfectInfo_page">
		<view class="f-s-18 f-w-b">完善你的资料<view></view>
		</view>
		<view class="f-s-18 f-w-b">让大家更好的了解你</view>
		<view class="u-m-t-16">
			<u--form :model="form" :rules="rules" ref="formRef" errorType="toast" labelWidth="80px"
				:labelStyle="{marginBottom:'8px',fontWeight:'bold',color:'#666',fontSize:'14px'}">
				<u-form-item prop="avatar">
					<up-upload :fileList="avatar" @delete="deleteAvatar" :previewFullImage="false" :maxCount="1"
						@afterRead="afterRead" :width="60" :height="60"></up-upload>
				</u-form-item>
				<u-form-item label="姓名:" prop="nickName" labelPosition="top" required>
					<u--input v-model="form.nickName" type="text" clearable="true"
						placeholderStyle="font-size: 12px;color: #909399" placeholder="请输入您的姓名"></u--input>
				</u-form-item>
				<u-form-item label="性别:" prop="department" labelPosition="top" required>
					<picker @change="sexChange" range-key="name" :range="sexArray">
						<up-input placeholder="请选择性别" border="surround" readonly v-model="form.sexName"
							placeholderStyle="font-size: 12px;color: #909399">
							<template #suffix>
								<up-icon name="arrow-down" color="#909399"></up-icon>
							</template>
						</up-input>
					</picker>
				</u-form-item>
				<u-form-item label="年龄:" prop="age" labelPosition="top" required>
					<up-input placeholder="请输入您的年龄" type="number" border="surround" v-model="form.age"
						placeholderStyle="font-size: 12px;color: #909399">
					</up-input>
				</u-form-item>
			</u--form>
		</view>
	</view>
	<view class="bottomLayer">
		<view class="u-p-60">
			<u-button type="primary" color="#2080F7" shape="circle" text="提交" @click="submit"></u-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		toRefs
	} from 'vue';
	import {
		editInfo,
		getInfo
	} from '@/api/user.js'
	import {
		toast
	} from '@/utils/common.js';
	import {
		uploadFilePromise
	} from '@/utils/common.js';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import store from '../store';
	const avatar = ref([])
	const {
		proxy
	} = getCurrentInstance();
	const sexArray = [{
		name: '男',
		value: 0
	}, {
		name: '女',
		value: 1
	}];
	const form = ref({
		avatar: '',
		nickName: '',
		sex: '',
		sexName: '',
		age: 0,
	})
	const rules = {
		nickName: [{
			required: true,
			message: '昵称不能为空',
			trigger: 'blur'
		}],
		sex: [{
			required: true,
			message: '性别不能为空',
			trigger: 'blur'
		}],
	}
	onLoad(() => {
		// 获取用户信息
		store.dispatch('GetInfo').then(({
			user
		}) => {
			form.value = {
				nickName: user.nickName, // 昵称
				sex: user.sex, // 性别
				age: user.age, // 年龄
				sexName: user.sex == '0' ? '男' : '女', // 性别名称
			}
			avatar.value = [{
				url: user.avatar
			}]
			console.info("form",form.value)
		})
	})

	const sexChange = (e) => {
		form.value.sex = e.detail.value // 切换状态
		form.value.sexName = sexArray[e.detail.value].name // 切换状态
	}

	const deleteAvatar = () => {
		avatar.value = []
	}

	// 上传头像
	const afterRead = async ({
		file
	}) => {
		const data = await uploadFilePromise(file.url);
		form.value.avatar = JSON.parse(data).url
		avatar.value = [{
			url: form.value.avatar
		}]
	}

	function submit() {
		proxy.$refs["formRef"].validate().then(valid => {
			if(!form.value.age){
				toast("请输入年龄")
				return
			}
			//编辑
			editInfo(form.value).then(resp => {
				toast("提交成功")
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index'
					})
				}, 1000)
			})
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #eee !important;
	}

	.perfectInfo_page {
		padding: 196rpx 20px 12px;
	}

	::v-deep .u-upload__button {
		border-radius: 50% !important;
	}

	::v-deep .u-upload__wrap__preview__image {
		border-radius: 50% !important;
	}

	::v-deep .u-icon__icon {
		color: #5c5c66 !important;
	}

	.bottomLayer {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
</style>